<template>
  <view class="purchanse-info" :style="popup.show ? 'height:100vh;overflow: hidden;' : ''">
    <view class="item item_purchanse-info">
      <view class="i-item">
        <view class="item-title">订单信息</view>
      </view>
      <view class="i-item sn">
        <view class="l-i-item">
          <view class="name">订单编号</view>
          <view class="sn-text">{{ black_Get(purchanseInfo, "sn") }}</view>
        </view>
        <text class="r-i-item" style="color: #db187c" @click="setClipboardData(purchanseInfo.sn, '复制成功')">复制</text>
      </view>
      <view class="i-item">
        <text>商品数量</text>
        <text>{{ black_Get(purchanseInfo, "goodsItemsQuantity", "0") }}件</text>
      </view>
      <view class="i-item">
        <text>订单金额</text>
        <text>{{
            black_Get(purchanseInfo, "isNewDistributor") === 1
              ? black_Get(purchanseInfo, "amount", "0") +
                black_Get(purchanseInfo, "goodsItemsQuantity", "0") * 35
              : black_Get(purchanseInfo, "amount", "0")
          }}元</text>
      </view>
      <view class="i-item">
        <text>业绩积分</text>
        <text>{{ black_Get(purchanseInfo, "integralAchieveGive", "0") }}积分</text>
      </view>
      <view class="i-item">
        <text>订单时间</text>
        <text>{{ black_Get(purchanseInfo, "createTime") }}</text>
      </view>
      <view class="i-item">
        <text>业绩时间</text>
        <text>{{ $_.get(purchanseInfo, "achieveTime") ? $dayjs($_.get(purchanseInfo, "achieveTime")).format("YYYY-MM") : '--' }}</text>
      </view>
      <view class="i-item">
        <text>业绩店主</text>
        <text>{{ black_Get(purchanseInfo, "member.nickname") }}</text>
      </view>
      <view class="i-item unpaid">
        <text>订单状态</text>
        <text style="color: #db187c">{{
          $_.get(purchanseInfo, "status") | purchanseStatusFilter
        }}</text>
        <view v-if="purchanseInfo.status === -1" @tap="goPay">去付款</view>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isGoodsInfoShow = !isGoodsInfoShow">
        <view class="h-l">
          <view class="l-title">商品信息</view>
          <view class="l-stock" v-if="viewNodeVisable.fn.do(1)">
            <view class="i i_out">
              <view class="square square1"></view>
              <text>已出库/{{ quantityHasStockOutSum }}</text>
            </view>
            <view class="i i_no-out">
              <view class="square square2"></view>
              <text>未出库/{{ quantityUnStockOutSum }}</text>
            </view>
          </view>
        </view>
        <icon class="iconfont">{{ isGoodsInfoShow ? "&#xe62b;" : "&#xe62c;" }}</icon>
      </view>
      <view class="content" v-show="isGoodsInfoShow">
        <view class="c-item" v-for="(item, id) in goodsList" :key="id" @tap="onOpenPopup(item)">
          <text>{{ black_Get(item, "goods.name") }}</text>
          <text v-if="viewNodeVisable.fn.do(1)">
            {{ item.pgiQuantity - item.pgiQuantityHasStockOut }}
            <text style="color: #333333">/{{ black_Get(item, "pgiQuantityHasStockOut", "0") }}</text>
          </text>
          <text v-if="viewNodeVisable.fn.do(2)">{{ black_Get(item, "pgiQuantity", "0") }}件</text>
        </view>
        <view class="empty-tip" v-if="goodsList.length === 0">~暂无商品信息~</view>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isGiftShow = !isGiftShow">
        <view class="h-l">
          <view class="l-title">赠送信息</view>
          <view class="l-stock" v-if="viewNodeVisable.fn.do(1)">
            <view class="i i_out">
              <view class="square square1"></view>
              <text>已出库/{{ gifQuantityHasStockOutSum }}</text>
            </view>
            <view class="i i_no-out">
              <view class="square square2"></view>
              <text>未出库/{{ gifQuantityUnStockOutSum }}</text>
            </view>
          </view>
        </view>
        <icon class="iconfont">{{ isGiftShow ? "&#xe62b;" : "&#xe62c;" }}</icon>
      </view>
      <view class="content" v-show="isGiftShow">
        <view class="c-item" v-for="(item, index) in giftList" :key="index" @tap="onOpenPopup(item)">
          <text>{{ black_Get(item, "goods.name") }}</text>
          <text v-if="viewNodeVisable.fn.do(1)">
            {{ item.pgiQuantity - item.pgiQuantityHasStockOut }}
            <text style="color: #333333">/{{ black_Get(item, "pgiQuantityHasStockOut", "0") }}</text>
          </text>
          <text v-if="viewNodeVisable.fn.do(2)">{{ black_Get(item, "pgiQuantity", "0") }}件</text>
        </view>
        <view class="empty-tip" v-if="giftList.length === 0">~暂无商品信息~</view>
      </view>
    </view>

    <template v-if="purchanseInfo.status !== -1">
      <view class="item item_payment-info">
        <view class="item_payment-info_header" @click="isPaymentInfoShow = !isPaymentInfoShow">
          <view class="item_payment-info_header-title"> 支付信息 </view>
          <icon class="iconfont">{{ isPaymentInfoShow ? "&#xe62b;" : "&#xe62c;" }}</icon>
        </view>
        <view class="item_payment-info_content" v-show="isPaymentInfoShow">
          <view class="c-item" v-if="$_.get(purchanseInfo, 'paymentIsUseGoodsSeriesPrestore') && $_.get(purchanseInfo, 'paymentGoodsSeriesPrestoreAmount' )">
            <text class="c-item_text">组合支付</text>
            <text class="c-item_text">￥{{
              $_.get(purchanseInfo, "paymentGoodsSeriesPrestoreAmount")
            }}</text>
          </view>
          <view class="c-goods-series">
            <view class="c-goods-series-item" v-for="(item, i) in paymentGoodsSeriesPrestoreJson" :key="i">{{
            `${item.goodsSeries.name}:${item.quantity}`
          }}</view>
          </view>
          <view class="c-item" v-if="$_.get(purchanseInfo, 'paymentBalanceAmount')">
            <text class="c-item_text">余额支付</text>
            <text class="c-item_text">￥{{ $_.get(purchanseInfo, "paymentBalanceAmount") }}</text>
          </view>
          <view class="c-item" v-if="$_.get(purchanseInfo, 'paymentBankAmount')">
            <text class="c-item_text">账户支付</text>
            <text class="c-item_text">￥{{ $_.get(purchanseInfo, "paymentBankAmount") }}</text>
          </view>
          <view class="c-bank" v-for="(item, i) in paymentBankJson" :key="i">
            <text class="c-item_text">{{ item.name }}</text>
            <text class="c-item_text">￥{{ item.amount }}</text>
          </view>
          <view class="c-item">
            <text class="c-item_label">实付金额</text>
            <view class="c-item_amount">
              <view class="c-item_amount-actual">￥{{ Number($_.get(purchanseInfo, "amountActual")).toFixed(2) }}</view>
              <view class="c-item_amount-over"
                v-if="Number($_.get(purchanseInfo, 'amountActual')) - Number($_.get(purchanseInfo, 'amount')) > 0">
                超出￥{{(Number($_.get(purchanseInfo, "amountActual")) - Number($_.get(purchanseInfo, "amount"))).toFixed(2)}}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="item item_payment-change-info">
        <view class="item_payment-change-info_header" @click="isPaymentChangeInfoShow = !isPaymentChangeInfoShow">
          <view class="item_payment-change-info_header-title">
            账户变更信息
          </view>
          <icon class="iconfont">
            {{ isPaymentChangeInfoShow ? "&#xe62b;" : "&#xe62c;" }}</icon>
        </view>
        <view class="item_payment-change-info_content" v-show="isPaymentChangeInfoShow">
          <view class="c-item">
            <text>不包含此订单的当月积分</text>
            <text>{{ $_.get(achievePre, "integral", 0) }}</text>
          </view>
          <view class="c-item">
            <text>包含此订单的当月积分</text>
            <text>{{
            $_.get(achievePre, "integral", 0) +
            $_.get(purchanseInfo, "integralAchieveGive", 0)
          }}</text>
          </view>
          <view class="c-item">
            <text>不包含此订单的货款余额</text>
            <text>{{ $_.get(balancePre, "balance", 0).toFixed(2) }}</text>
          </view>
          <view class="c-item">
            <text>包含此订单的货款余额</text>
            <text>{{ balanceAfter.toFixed(2) }}</text>
          </view>
          <view class="c-item">
            <text>不包含此订单的预存组合件数</text>
          </view>
          <view class="c-goods-series">
            <view class="c-goods-series-item" v-for="(item, i) in goodsSeriesPrestorePre" :key="i">
              {{ `${item.name}:${item.quantity}` }}</view>
          </view>
          <view class="c-item">
            <text>包含此订单的预存组合件数</text>
          </view>
          <view class="c-goods-series">
            <view class="c-goods-series-item" v-for="(item, i) in goodsSeriesPrestoreAfterStr" :key="i">
              {{ `${item.name}:${item._remain}` }}</view>
          </view>
        </view>
      </view>
    </template>


    <view class="item item_express-info" v-if="
        [4, 5].includes(purchanseInfo.status) &&
        logisticsFormMailList.length !== 0
      ">
      <swiper>
        <swiper-item v-for="(item, i) in logisticsFormMailList" :key="i" current>
          <view class="swiper-item">
            <view class="e-item">
              <view class="item-title">物流信息</view>
              <view>{{ i + 1 }}/{{ logisticsFormMailList.length }}</view>
            </view>
            <view class="e-item">
              <view class="l-i-item">
                <text>快递公司</text>
                <text>{{ express }}</text>
              </view>
              <text class="r-i-item" style="color: #db187c"
                @tap="nav(`/subpackage/order/pages/express-info?id=${item.id}`)">查看物流</text>
            </view>
            <view class="e-item">
              <view class="l-i-item">
                <text>快递单号</text>
                <text>{{ item.sn || "--" }}</text>
              </view>
              <text class="r-i-item" style="color: #db187c" @click="copyText(item.sn)">复制</text>
            </view>
            <view class="e-item">
              <view class="l-i-item">
                <text>发货时间</text>
                <text>{{ item.createTime || "--" }}</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="foot-info">
      <view class="f-item">
        <view class="f-name">制单员：</view>
        <view class="f-text">{{
          black_Get(purchanseInfo, "documentMaker.nickname")
        }}</view>
      </view>
      <view class="f-item">
        <view class="f-name">联系电话：</view>
        <view class="f-text">{{
          black_Get(purchanseInfo, "documentMaker.mobile")
        }}</view>
      </view>
      <view class="f-item">
        <view class="f-name">客服主管：</view>
        <view class="f-text">陈明珍</view>
      </view>
      <view class="f-item">
        <view class="f-name">联系电话：</view>
        <view class="f-text">13336473003</view>
      </view>
      <view class="f-item">
        <view class="f-name">温馨提示：</view>
        <view class="f-text" style="color: #ff0000">如收到货后有质量问题，或数量差异，请在收到货24小时内提出，否则视为无异议正常收货。</view>
      </view>
      <view class="f-item">
        <view class="f-name">收货地址：</view>
        <text class="f-text">{{ black_Get(purchanseInfo, "recipient")
          }}{{ black_Get(purchanseInfo, "recipientMobile")
          }}{{ black_Get(purchanseInfo, "fullAddress") }}</text>
      </view>
    </view>

    <van-popup :show="popup.show" round position="bottom" custom-style="height: 75%" @close="popup.show = false"
      class="popup">
      <view class="p-header">
        <view class="title">
          <text>{{ popup.selectItem.goods.name }}</text>
          <van-icon name="cross" @tap="popup.show = false" />
        </view>
        <view class="table table_header">
          <view class="t-col">颜色</view>
          <view class="t-col">码数</view>
          <view class="t-col">数量</view>
          <view class="t-col">单价</view>
          <view class="t-col">金额</view>
          <view class="t-col">积分</view>
        </view>
      </view>
      <view class="p-body">
        <view class="table table_row" v-for="(item, i) in popup.selectItem.pgiList" :key="i">
          <view class="t-col">{{ item.goodsItems.specJson | colorFilter }}</view>
          <view class="t-col">{{ item.goodsItems.specJson | sizeFilter }}</view>
          <view class="t-col">{{ item.quantity }}</view>
          <view class="t-col">{{ item.goodsItems.amountCost + item.goodsItems.amountCostAbove }}</view>
          <view class="t-col">
            {{ Math.ceil(item.quantity *(item.goodsItems.amountCost + item.goodsItems.amountCostAbove))}}
          </view>
          <view class="t-col">
            {{ ((item.goodsItems.integralGiveDividend / item.goodsItems.integralGiveDivisor) * item.quantity).toFixed(2)}}
          </view>
        </view>
      </view>
    </van-popup>

    <a-empty v-if="!purchanseInfo" :src="'empty/order.png' | prefixOssUrl" :tips="['暂无相关订单']"></a-empty>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
  import {
    model
  } from "@/model";
  import {
    Request
  } from "@/model/request";

  const {
    Purchanse,
    PageBo
  } = model.collection;

  var _ = require("lodash");
  export default {
    data() {
      return {
        reqeust: new Request(),
        id: "",
        isGoodsInfoShow: false,
        isGiftShow: false,
        isPaymentInfoShow: false,
        isPaymentChangeInfoShow: false,
        popup: {
          title: "",
          selectItem: {},
          show: false,
        },
        express: "",
        purchanseStatusValue: "",
        purchanseInfo: {},
        logisticsFormMailList: [],
        expressList: [],
        viewNodeVisable: {
          fn: {
            do: (n) => {
              if (n === 1) {
                return this.purchanseInfo.status === 4;
              }
              if (n === 2) {
                return this.purchanseInfo.status !== 4;
              }
            },
          },
        },
      };
    },
    onLoad(options) {
      this.id = options.id;
      this.getPurchanseInfo();
      this.getSysExpress();
    },
    filters: {
      purchanseStatusFilter(v) {
        if (v === -1) return "待支付";
        if (v === 0) return "已支付";
        if (v === 1) return "审核中";
        if (v === 3) return "待出库";
        if (v === 4) return "部分出库";
        if (v === 5) return "已出库";
        return;
      },
      sizeFilter(v) {
        return JSON.parse(v).find((i) => i.key === "尺码").value;
      },
      colorFilter(v) {
        return JSON.parse(v).find((i) => i.key === "颜色").value;
      },
    },
    computed: {
      quantityHasStockOutSum() {
        if (this.purchanseInfo.purchanseGoodsItemsList) {
          return this.purchanseInfo.purchanseGoodsItemsList.reduce(
            (p, c) => (p += c.quantityHasStockOut),
            0
          );
        }
        return 0;
      },
      quantityUnStockOutSum() {
        if (this.purchanseInfo.purchanseGoodsItemsList) {
          return this.purchanseInfo.purchanseGoodsItemsList.reduce(
            (p, c) => (p += c.quantity - c.quantityHasStockOut),
            0
          );
        }
        return 0;
      },
      gifQuantityHasStockOutSum() {
        if (this.purchanseInfo.purchanseGiftList) {
          return this.purchanseInfo.purchanseGiftList.reduce(
            (p, c) => (p += c.quantityHasStockOut),
            0
          );
        }
        return 0;
      },
      gifQuantityUnStockOutSum() {
        if (this.purchanseInfo.purchanseGiftList) {
          return this.purchanseInfo.purchanseGiftList.reduce(
            (p, c) => (p += c.quantity - c.quantityHasStockOut),
            0
          );
        }
        return 0;
      },
      goodsList() {
        let l = [];
        const purchanseGoodsItemsList = _.get(this, "purchanseInfo.purchanseGoodsItemsList", []);
        purchanseGoodsItemsList.forEach((i) => {
          let tar = _.find(l, (x) => {
            return (
              _.get(x.goods, "goodsId") === _.get(i, "goodsItems.goodsId") &&
              _.get(i, "goodsItems.goodsId")
            );
          });
          if (tar) {
            tar.pgiList.push(i);
            tar.pgiQuantity = tar.pgiQuantity + _.get(i, "quantity");
          } else {
            l.push({
              goods: _.get(i, "goodsItems"),
              pgiList: [i],
              pgiQuantity: _.get(i, "quantity"),
              pgiQuantityHasStockOut: _.get(i, "quantityHasStockOut"),
            });
          }
        });
        return l;
      },
      giftList() {
        let l = [];
        const purchanseGiftList = _.get(this, "purchanseInfo.purchanseGiftList", []);
        purchanseGiftList.forEach((i) => {
          let tar = _.find(l, (x) => {
            return (
              _.get(x.goods, "goodsId") === _.get(i, "goodsItems.goodsId") &&
              _.get(i, "goodsItems.goodsId")
            );
          });
          if (tar) {
            tar.pgiList.push(i);
            tar.pgiQuantity += _.get(i, "quantity");
            tar.pgiQuantityHasStockOut += _.get(i, "quantityHasStockOut");
          } else {
            l.push({
              goods: _.get(i, "goodsItems"),
              pgiList: [i],
              pgiQuantity: _.get(i, "quantity"),
              pgiQuantityHasStockOut: _.get(i, "quantityHasStockOut"),
            });
          }
        });
        return l;
      },
      paymentGoodsSeriesPrestoreJson() {
        return this.$_.get(this.purchanseInfo, "paymentGoodsSeriesPrestoreJson") ?
          JSON.parse(this.purchanseInfo.paymentGoodsSeriesPrestoreJson) : [];
      },
      paymentBankJson() {
        return this.$_.get(this.purchanseInfo, "paymentBankJson") ?
          JSON.parse(this.purchanseInfo.paymentBankJson) : [];
      },
      achievePre() {
        return this.$_.get(this.purchanseInfo, "achievePre") ?
          JSON.parse(this.purchanseInfo.achievePre) : [];
      },
      balancePre() {
        return this.$_.get(this.purchanseInfo, "balancePre") ?
          JSON.parse(this.purchanseInfo.balancePre) : [];
      },
      balanceAfter() {
        if (this.$_.get(this.purchanseInfo, "paymentStatus") === 1) {
          return this.$_.get(this.balancePre, "balance", 0);
        }
        const am =
          this.$_.get(this.balancePre, "balance", 0) +
          (this.$_.get(this.purchanseInfo, "paymentGoodsSeriesPrestoreAmount") +
            this.$_.get(this.purchanseInfo, "paymentWeixinAmount") +
            this.$_.get(this.purchanseInfo, "paymentAlipayAmount") +
            this.$_.get(this.purchanseInfo, "paymentCashAmount") +
            this.$_.get(this.purchanseInfo, "paymentBankAmount")) -
          this.$_.get(this.purchanseInfo, "amount") +
          (this.$_.get(this.purchanseInfo, "isNewDistributor") && [1, 2].includes(
              this.$_.get(this.purchanseInfo, "type") &&
              this.$_.get(this.purchanseInfo, "integralAchieveGive") > 0
            ) ?
            35 * this.$_.get(this.purchanseInfo, "integralAchieveGive") :
            0);
        return am > 0 ? am : 0;
      },
      goodsSeriesPrestorePre() {
        return JSON.parse(this.$_.get(this.purchanseInfo, "goodsSeriesPrestorePre", '[]'));
      },
      goodsSeriesPrestoreAfterStr() {
        return JSON.parse(this.$_.get(this.purchanseInfo, "goodsSeriesPrestorePre") || '[]').map((i) => {
            const tar = this.$_.find(
              JSON.parse(
                this.$_.get(
                  this.purchanseInfo,
                  "paymentGoodsSeriesPrestoreJson"
                )
              ),
              (x) => {
                return x.goodsSeries.name === i.name;
              }
            );
            if (tar) {
              i._remain = i.quantity - tar.quantity;
              return i;
            }
            i._remain = i.quantity;
            return i;
          }) ;
      },
    },
    methods: {
      getPurchanseInfo() {
        Purchanse.sendApi("info", {
          params: {},
          data: {
            query: {
              id: this.id,
            },
          },
        }).then((res) => {
          const {
            status,
            data
          } = res;
          if (status) {
            this.purchanseInfo = data;
            data.stockOutList.forEach((e) => {
              if (e.logisticsForm) {
                if (e.logisticsForm.logisticsFormMailList.length !== 0) {
                  this.logisticsFormMailList = this.logisticsFormMailList.concat(
                    e.logisticsForm.logisticsFormMailList
                  );
                  if (this.expressList) {
                    this.express = this.expressList.find(
                      (v) => v.id === e.sysExpressId
                    ).name;
                  }
                }
              }
            });
          }
        });
      },
      getSysExpress() {
        this.reqeust
          .do("open", "enum", "lst", {
            params: {
              key: "sysExpress",
            },
            data: {},
          })
          .then((res) => {
            const {
              status,
              data
            } = res;
            if (status) {
              this.expressList = data;
            }
          });
      },
      onOpenPopup(e) {
        this.popup.selectItem = e;
        this.popup.show = true;
      },
      async goPay() {
        const {
          sn
        } = this.purchanseInfo;

        this.nav(`/subpackage/order/pages/purchanse/pay?sn=${sn}`);
      },
    },
  };
</script>

<style lang="less">
  page {
    background-color: #f7f7f7;

    .purchanse-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .popup {
        .p-header {
          position: fixed;
          width: 100%;
          background-color: #fff;
          border-top-left-radius: 30rpx;
          border-top-right-radius: 30rpx;

          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20rpx;
            font-size: 36rpx;
            font-weight: bold;
            text-align: left;
          }

          .table_header {
            display: flex;
            justify-content: space-around;
            padding: 20rpx 0;
            font-size: 30rpx;
            color: #333;
            border-bottom: 1rpx solid #ccc;
          }
        }

        .p-body {
          padding-top: 180rpx;

          .table_row {
            display: flex;
            justify-content: space-around;
            padding: 20rpx 0;
            font-size: 30rpx;
            color: #666;
          }
        }
      }

      .item {
        width: 660rpx;
        padding: 20rpx;
        margin-top: 30rpx;
        background: #fff;
        border-radius: 20rpx;

        &_purchanse-info {
          .i-item {
            margin-bottom: 35rpx;
            font-size: 30rpx;
            color: #666;

            text:nth-child(2) {
              margin-left: 35rpx;
            }

            .item-title {
              padding-left: 10rpx;
              font-size: 32rpx;
              font-weight: bold;
              color: #000;
              border-left: 8rpx solid #d61e85;
            }
          }

          .sn {
            display: flex;
            justify-content: space-between;

            .l-i-item {
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;

              .name {
                width: 120rpx;
                margin-right: 35rpx;
              }

              .sn-text {
                width: 400rpx;
                word-break: break-all;
              }
            }
          }

          .unpaid {
            position: relative;

            >view {
              position: absolute;
              top: 0;
              right: 0;
              margin-left: 15rpx;
              width: 150rpx;
              height: 50rpx;
              font-size: 30rpx;
              line-height: 50rpx;
              color: #db187c;
              border-radius: 30rpx;
              border: 1rpx solid #db187c;
              text-align: center;
              transform: translateY(-15%);
            }
          }

        }

        &_goods-info {
          .header {
            display: flex;
            justify-content: space-between;
            height: 43rpx;
            margin-bottom: 20rpx;

            .h-l {
              display: flex;
              justify-content: center;
              align-items: center;

              .l-title {
                padding-left: 10rpx;
                font-size: 32rpx;
                font-weight: bold;
                border-left: 8rpx solid #d61e85;
              }

              .l-stock {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 28rpx;

                .i {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-left: 20rpx;

                  .square {
                    width: 18rpx;
                    height: 18rpx;
                    margin-right: 10rpx;
                  }

                  &_out {
                    color: #666;

                    .square1 {
                      background-color: #666;
                    }
                  }

                  &_no-out {
                    color: #db187c;

                    .square2 {
                      background-color: #db187c;
                    }
                  }
                }
              }
            }
          }

          .content {
            .c-item {
              display: flex;
              justify-content: space-between;
              margin-bottom: 20rpx;
              font-size: 30rpx;
              color: #333;
            }

            .empty-tip {
              margin-top: 30rpx;
              font-size: 30rpx;
              color: #666;
              text-align: center;
            }

            text:nth-child(2) {
              color: #d61e85;
            }
          }
        }

        &_payment-info {
          &_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 43rpx;
            margin-bottom: 20rpx;

            &-title {
              position: relative;
              padding-left: 10rpx;
              font-size: 32rpx;
              font-weight: bold;
              border-left: 8rpx solid #d61e85;
            }
          }

          &_content {
            .c-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20rpx;
              font-size: 30rpx;
              color: #333;

              &_label {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
              }

              &_amount {
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                &-actual {
                  font-size: 30rpx;
                  font-weight: bold;
                  color: #ff0b0b;
                }

                &-over {
                  font-size: 24rpx;
                  font-weight: bold;
                  color: #ff8500;
                }
              }
            }

            .c-goods-series {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;

              &-item {
                width: 150rpx;
                height: 60rpx;
                margin: 0 20rpx 10rpx 20rpx;
                font-size: 26rpx;
                font-weight: 500;
                color: #333;
                text-align: center;
                line-height: 60rpx;
                border: 1rpx solid #e5e5e5;
                border-radius: 10rpx;
              }
            }

            .c-bank {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 30rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #666;
              line-height: 34rpx;
            }
          }
        }

        &_payment-change-info {
          &_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 43rpx;
            margin-bottom: 20rpx;

            &-title {
              position: relative;
              padding-left: 10rpx;
              font-size: 32rpx;
              font-weight: bold;
              border-left: 8rpx solid #d61e85;
            }
          }

          &_content {
            .c-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 30rpx;
              font-size: 30rpx;
              color: #333;
            }

            .c-goods-series {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;

              &-item {
                width: 150rpx;
                height: 60rpx;
                margin: 0 20rpx 20rpx 20rpx;
                font-size: 26rpx;
                font-weight: 500;
                color: #333;
                text-align: center;
                line-height: 60rpx;
                border: 1rpx solid #e5e5e5;
                border-radius: 10rpx;
              }
            }
          }
        }

        &_express-info {
          swiper {
            height: 280rpx;

            .swiper-item {
              margin-right: 10rpx;

              .e-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 35rpx;
                font-size: 30rpx;

                &:nth-child(4) {
                  margin-bottom: 0;
                }

                .item-title {
                  padding-left: 10rpx;
                  font-size: 32rpx;
                  font-weight: bold;
                  color: #000;
                  border-left: 8rpx solid #d61e85;
                }

                .l-i-item {
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;

                  text:nth-child(1) {
                    color: #666666;
                  }

                  text:nth-child(2) {
                    margin-left: 35rpx;
                  }
                }
              }
            }
          }
        }
      }

      .foot-info {
        padding: 0 20rpx;
        margin: 30rpx 0;

        .f-item {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 20rpx;
          font-size: 30rpx;

          .f-name {
            width: 160rpx;
            margin-right: 15rpx;
            color: #666666;
          }

          .f-text {
            width: 500rpx;
          }
        }
      }
    }
  }
</style>